<template>
	<view>
		 <view>
		  
		  </view>
		<!-- <view style="margin-top: 16rpx;margin-left: 16rpx; height: 50rpx;">
			<text style="font-size: 30rpx; color:#8E8D91;">订单详情</text>
			<text style="color: red;">*剩余支付时间:{{ countDown }},请尽快支付</text>
		</view> -->
		
		<view class="hx" style=" width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		
		<view style="background-color:white;height: 70rpx; display: flex;align-items: center;justify-content: space-between;">
			<text  style="font-size: 30rpx;margin-left: 16rpx;">商品名称</text>
			<text  style="font-size: 25rpx; color:#8E8D91; margin-right: 16rpx;">{{title}}</text>
		</view>
		
		 <view class="hx" style="margin-left: 16rpx; width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		 
		 <view style="background-color:white;height: 70rpx; display: flex;align-items: center;justify-content: space-between;">
		 	<text  style="font-size: 30rpx;margin-left: 16rpx;">订单编号</text>
		 	<text  style="font-size: 25rpx; color:#8E8D91; margin-right: 16rpx;">{{outTradeNo}}</text>
		 </view>
		 
		  <view class="hx" style="margin-left: 16rpx; width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		  
		  <view style="background-color:white;height: 70rpx; display: flex;align-items: center;justify-content: space-between;">
		  	<text  style="font-size: 30rpx;margin-left: 16rpx;">商家名称</text>
		  	<text  style="font-size: 25rpx; color:#8E8D91; margin-right: 16rpx;">精准落码讲堂</text>
		  </view>
		  <view class="hx" style="margin-left: 16rpx; width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		  
		  <view style="background-color:white;height: 70rpx; display: flex;align-items: center;justify-content: space-between;">
		  	<text  style="font-size: 30rpx;margin-left: 16rpx;">商品价格</text>
		  	<text  style="font-size: 25rpx; color:#8E8D91; margin-right: 16rpx;">￥{{totalMoney}}.00元</text>
		  </view>
		  <view class="hx" style=" width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		  
		  <view class="hx" style="margin-top: 30rpx; width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		  <view style="background-color:white;height: 70rpx; display: flex;align-items: center;justify-content: space-between;">
		  	<text  style="font-size: 30rpx;margin-left: 16rpx;">待支付</text>
		  	<text  style="font-size: 25rpx; color:red; margin-right: 16rpx;">￥{{totalMoney}}.00元</text>
		  </view>
		  <view class="hx" style=" width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		  
		  <view style="margin-top: 16rpx;margin-left: 16rpx; height: 50rpx;">
		  	<text style="font-size: 30rpx; color:#8E8D91;">支付方式</text>
		  </view>
		  
		  <view class="hx" style=" width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		  
		  <view @tap="launchPayment" style="background-color:white;width: 100%;height: 100rpx; display: flex;align-items: center;">
			<view style=" display: flex;align-items: center;width: 100%;">
				<image  src="/static/iconfont/wxlogo.png" style="margin-left:16rpx;width: 70rpx; height: 70rpx;"></image>
				<text  style="margin-left: 16rpx;font-size: 40rpx;">微信支付</text>
			</view>
			<view style="width: 10%;">
				<image  src="/static/iconfont/tiaozhuan.png"  style="width: 40rpx; height: 20rpx;"/>
			</view>
			
		  </view>
		  <view class="hx" style=" width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
		 
		 <!-- <view @tap="zfbPayment" style="background-color:white;height: 100rpx; display: flex;align-items: center;">
		  			  <view style=" display: flex;align-items: center;width: 100%;">
		  				  <image  src="/static/iconfont/zhifubao.png" style="margin-left:13rpx;width: 70rpx; height: 70rpx;"></image>
		  				  <text style="margin-left: 16rpx;font-size: 40rpx;">支付宝支付</text>
		  			  </view>
		  			  <view style="width: 10%;">
		  				<image  src="/static/iconfont/tiaozhuan.png"  style="width: 40rpx; height: 20rpx;"/>
		  			  </view>
		  </view>
		   <view class="hx" style=" width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view> -->
		  <view @tap="amtPayment" style="background-color:white;height: 100rpx; display: flex;align-items: center;">
			  <view style=" display: flex;align-items: center;width: 100%;">
				  <image  src="/static/iconfont/amt.png" style="margin-left:10rpx;width: 80rpx; height: 80rpx;"></image>
				  <text style="margin-left: 16rpx;font-size: 40rpx;">余额支付</text>
				  <text style="margin-left: 16rpx;font-size: 30rpx;">￥{{userAmt}}</text>
			  </view>
			  <view style="width: 10%;">
				<image  src="/static/iconfont/tiaozhuan.png"  style="width: 40rpx; height: 20rpx;"/>
			  </view>

		  </view>
	
			  <view class="hx" style=" width: 100%;height: 0.3rpx;background-color: rgba(5, 5, 5, 0.2);"></view>
	</view>

</template>

<script>
	const app = getApp();
	var urlPrefix = app.globalData.urlPrefix;
	export default {
		data() {
			return {
				id: '',
				intervalId: null, // 存储interval的ID
				appid: '',  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
				noncestr: '', // 随机字符串
				package: 'Sign=WXPay',        // 固定值
				partnerid: '',      // 微信支付商户号
				prepayid: '', // 统一下单订单号 
				timestamp: '',        // 时间戳（单位：秒）
				sign: '', // 签名，这里用的 MD5/RSA 签名
				outTradeNo: '', //后台生成的订单号
				title: '',
				userAmt:0,
				userId:null,
				totalMoney:0,
				
			 //countDown: '', // 初始倒计时时间
			 //timer: null, // 存储定时器
			 //totalTime: 0, // 假设倒计时总时长为60秒
			 
			 token:null
			 
			}
		},
		onLoad(options) {
			var token = uni.getStorageSync('token');
			this.token = token
				
				uni.showLoading({
					  title: '加载中',
				});
				this.totalMoney = options.totalMoney,
			    this.outTradeNo = options.outTradeNo,
			    this.id = options.id,
			    this.title = options.title;
			  // this.totalTime = options.closeSeconds,
			   
			   //this.startCountDown();
			   var userId = uni.getStorageSync('userId');
			   this.userId = userId;
			   let that = this;
				uni.request({
					url: urlPrefix + '/api/applet/myInfo/getUserAmt?userId=' + userId,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: function (res) {
						uni.hideLoading();
						that.setData({
						   userAmt:res.data.datas
						});
					}
				});
		},
		onShow() {
		    // 页面显示时开始计时器
			this.refreshPage();
			    this.intervalId = setInterval(() => {
			      this.refreshPage();
			}, 5000);
		},
		onHide() {
			if (this.intervalId) {
			      clearInterval(this.intervalId);
			}
		},
		onPullDownRefresh() { // 停止下拉刷新
			uni.stopPullDownRefresh();}
		,
		onUnload() {
		    if (this.intervalId) {
		        clearInterval(this.intervalId)
		        this.intervalId = null
		    };
			// 页面卸载时清除定时器
			this.clearCountDown();
		},
		methods: {
			// 开始倒计时
		  startCountDown() {
			      let timeLeft = this.totalTime;
			      this.timer = setInterval(() => {
			        if (timeLeft > 0) {
			          timeLeft--;
			          this.countDown = this.formatTime(timeLeft);
			        } else {
			          this.clearCountDown();
			        }
			      }, 1000);
			},
			
			// 格式化时间
			formatTime(time) {
			  let minutes = Math.floor(time / 60);
			  let seconds = time % 60;
			  minutes = minutes < 10 ? '0' + minutes : minutes;
			  seconds = seconds < 10 ? '0' + seconds : seconds;
			  return `${minutes}分${seconds}秒`;
			},
			// 清除倒计时
			clearCountDown() {
			  clearInterval(this.timer);
			  this.timer = null;
			},
			
			zfbPayment(){
				uni.showToast({
					title: '支付宝功能暂未开通',
					icon: 'none',
					duration: 3000
				})
			},
			
			amtPayment(){
				let that = this;
				if(this.userAmt<10){
					uni.showToast({
						title: '余额不足！请前往充值或更换支付方式',
						icon: 'none',
						duration: 3000
					})
	
				}else{
					uni.showModal({
					    title: '操作提示',
					    content: '是否确认支付观看当前课件?',
					    success(res) {
					        if (res.confirm) {
					            uni.request({
					                url: urlPrefix + '/api/app/pay/amtPay',
					                method: 'POST',
									data:{
										"userId":that.userId,
										"outTradeNo":that.outTradeNo,
									},
					                header: {
					                    'content-type': 'application/json',
					                    'token': uni.getStorageSync('token')
					                },
					                success: function (suss) {
					                    if (suss.data.resp_code == 0) {
					                        uni.showToast({
					                            title: '支付成功',
					                            icon: 'success',
					                            duration: 2000,
												complete: function() {
												  setTimeout(function() {
												    uni.switchTab({
												       url: '/pages/coursewaredetails/coursewaredetails?id=' + that.id,
												    });
												  }, 2000);
												}
					                        });
					                    } else {
					                        uni.showToast({
					                            title: suss.data.resp_msg,
					                            icon: 'none',
					                            duration: 2000
					                        });
					                    }
					                }
					            });
					        } else if (res.cancel) {
					            //这里是点击取消执行事件
					        }
					    }
					});
				}
				
				
			
			},
			launchPayment(){
				uni.showLoading({
					title: '加载中',
					mask:true			
				});
				
				
		 		 let that = this;
		 		 uni.request({
				     url: urlPrefix + '/api/app/pay/verificationRegisterCode?id=' + this.id + '&userId=' + this.userId + "&outTradeNo="+this.outTradeNo,
				     method: 'GET',
				     header: {
				         'content-type': 'application/json',
				         'token': this.token
				     },
		 		     success: function (res) {
				         if (res.data.resp_code == 0) {
				 		        uni.hideLoading();
						   
								uni.requestPayment({
									
								     "provider": "wxpay", 
									 "orderInfo": {
										 "appid":  res.data.datas.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										 "noncestr":  res.data.datas.noncestr, // 随机字符串
										 "package": res.data.datas.package,        // 固定值
										 "partnerid": res.data.datas.partnerid,      // 微信支付商户号
										 "prepayid": res.data.datas.prepayid, // 统一下单订单号 
										 "timestamp":res.data.datas.timestamp,        // 时间戳（单位：秒）
										 "sign": res.data.datas.sign// 签名，这里用的 MD5/RSA 签名
										
									 },
									 success(res) {
										 // uni.navigateBack({
										 //             delta: 1
										 // });
										 uni.navigateTo({
										     url: '/pages/coursewaredetails/coursewaredetails?id=' + that.id,
										 });
									 },
									 fail(e) {
										uni.showToast({
										    title: '支付失败',
										    icon: 'none',
										    duration: 2000
										});
										 // uni.navigateBack({
										 //             delta: 1
										 // });
									 }
								})
		
				           
		 		         }else {
				 			uni.showToast({
				 			    title: res.data.resp_msg,
				 			    icon: 'none',
				 			    duration: 2000
				 			});
				 		}
				     
		 			}
		 		});
			},
			
		  refreshPage() {
			  let that = this;
				uni.request({
				    url: urlPrefix + '/api/app/pay/refreshOrders?outTradeNo=' + this.outTradeNo,
				    method: 'GET',
				    header: {
				        'content-type': 'application/json',
				        'token': uni.getStorageSync('token')
				    },
				    success: function (res) {
						if(res.data.datas == 3 || res.data.datas == 1){ //订单删除
							if (!this.intervalId) {
							   // uni.navigateBack({
							   //             delta: 1
							   // });
							   uni.navigateTo({
							       url: '/pages/coursewaredetails/coursewaredetails?id=' + that.id,
							   });
							}
						}
				    }
				});
		  },
		}
	}
</script>

<style lang="scss">
@import './payment.scss';
</style>

